<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>留言板</title>
<style>
	*{margin:0;padding:0;}
	.message{width:300px;min-height:500px;border:1px solid #333;padding:10px;background:#F6F6F6;margin:10px auto;border-radius:5px;}
	input{height:20px;padding:0 3px;color:#}
	ul{list-style:none;}
	li{font-size:16px;height:20px;text-indent:10px;margin-top:10px;line-height:20px;font-weight:bold;color:#666;}
</style>
<script>
	window.onload=function(){
		var oUl=document.getElementById("list");
		var oLi=oUl.getElementsByTagName("li");
		var inp=document.getElementsByTagName("input");

		//按下回车键发送消息
		inp[0].onkeyup=function(ev){
			var ev=ev||event;
			if(this.value!=""){
				//检测是否按下Enter键
				if(ev.keyCode==13){
					addInfo();
				}	
			}	
		}

		//按下留言按钮发送消息
		inp[1].onclick = addInfo;

		//批量删除
		inp[2].onclick=function(){
			for(var i=0;i<oLi.length;i++){
				if(!oLi[i].onOff){
					oUl.removeChild(oLi[i]);
					i--;//动态的改变了li的长度
				}
			}
		}


		function addInfo(){
			var li=document.createElement("li");
			
			//判断输入框是否输入内容
			if(inp[0].value){
				li.innerHTML=inp[0].value;
				li.onOff=true;
				if(oUl.children[0]){
					oUl.insertBefore(li,oUl.children[0]);
				}else{
					oUl.appendChild(li);
				}
			}else{
				alert("请输入内容！");	
			}
			//点击隔行变色
			for(var i=0;i<oLi.length;i++){
				(function(j){
					//鼠标移入颜色
					oLi[j].onmouseover=function(){
						this.style.background="#999";
						this.style.color="#fff";
					}
					
					//鼠标移开颜色消失
					oLi[j].onmouseout=function(){
						this.style.background="";
						this.style.color="";
					}
					
					oLi[j].onclick=function(){
						if(j%2==0){
							this.style.background="pink";
							oLi[j].onmouseout=function(){
								this.style.background="pink";
							}
						}else{
							this.style.background="#3c9";
							oLi[j].onmouseout=function(){
								this.style.background="#3c9";
							}
						}
					 this.onOff=!this.onOff;
					}
										
				})(i);
			}
			//清空文本框信息
			inp[0].value="";
		}
		
	}
</script>
</head>
<body>
	<div class="message">
		<input type="text"/>
	    <input type="button" value="留言" />
	    <input type="button" value="批量删除" />
	    <ul id="list"></ul>
	</div>
</body>
</html>
